Angular এ ngFor এবং ngIf ডিরেকটিভ ব্যবহার করে আপনি ডায়নামিকভাবে ডেটা লোড করতে পারেন এবং সেই ডেটার ভিত্তিতে Highcharts চার্ট তৈরি করতে পারেন। ngFor ব্যবহার করে ডেটা লুপ করা যায় এবং ngIf ব্যবহার করে শর্তাধীনভাবে কিছু উপাদান প্রদর্শন করা যায়।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular এ ngFor এবং ngIf ব্যবহার করে ডায়নামিক চার্ট তৈরি করা যায়।

স্টেপ 1: প্রজেক্ট সেটআপ এবং Highcharts ইন্টিগ্রেশন

প্রথমে, Highcharts এবং highcharts-angular লাইব্রেরি ইনস্টল করা প্রয়োজন।

npm install highcharts highcharts-angular --save

এরপর, app.module.ts ফাইলে HighchartsChartModule ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

স্টেপ 2: ডায়নামিক ডেটা লোড এবং ngFor এর মাধ্যমে চার্ট তৈরি করা

এখন app.component.ts ফাইলে ডেটা এবং ngFor ব্যবহার করে Highcharts চার্ট কনফিগারেশন তৈরি করুন।

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  // ডায়নামিকভাবে লোড হওয়া ডেটা
  categories = ['January', 'February', 'March', 'April', 'May'];
  seriesData = [
    { name: 'Product A', data: [10, 20, 30, 40, 50] },
    { name: 'Product B', data: [15, 25, 35, 45, 55] },
    { name: 'Product C', data: [20, 30, 40, 50, 60] }
  ];

  ngOnInit() {
    // Highcharts কনফিগারেশন তৈরি করা
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'ডায়নামিক ডেটা দিয়ে চার্ট'
      },
      xAxis: {
        categories: this.categories  // ngFor দিয়ে লোড হওয়া ক্যাটেগরি
      },
      yAxis: {
        title: {
          text: 'মান'
        }
      },
      series: this.seriesData  // ngFor দিয়ে সিরিজ লোড হওয়া
    };
  }
}

এখানে, categories এবং seriesData দুটি অ্যারে ব্যবহার করা হয়েছে যা ডায়নামিকভাবে ডেটা ধারণ করবে। categories অ্যারে মাসের নাম এবং seriesData অ্যারে পণ্যগুলোর জন্য বিক্রির ডেটা ধারণ করবে। ngFor এর মাধ্যমে এই ডেটা চার্টে যোগ করা হবে।

স্টেপ 3: ngFor এবং ngIf এর মাধ্যমে HTML-এ ডেটা প্রদর্শন

এখন app.component.html ফাইলে ngFor এবং ngIf ব্যবহার করে চার্টে ডেটা প্রদর্শন করব।

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

<!-- ngIf ব্যবহার করে কিছু শর্তাধীন উপাদান প্রদর্শন -->
<div *ngIf="categories.length > 0">
  <h3>ডেটা লোড করা হয়েছে!</h3>
</div>

<!-- ngFor দিয়ে ডেটার তালিকা দেখানো -->
<ul>
  <li *ngFor="let category of categories">
    {{ category }}
  </li>
</ul>

এখানে, ngIf ব্যবহার করা হয়েছে একটি শর্ত যাচাই করার জন্য (যদি ক্যাটেগরি ডেটা থাকে তবে "ডেটা লোড করা হয়েছে!" প্রদর্শিত হবে), এবং ngFor দিয়ে categories অ্যারের উপাদানগুলোকে তালিকাভুক্ত করা হয়েছে।

ব্যাখ্যা:

• ngFor: Angular এর ngFor ডিরেকটিভ লিস্ট বা অ্যারের উপাদানগুলোর ওপর লুপ চালিয়ে প্রতিটি উপাদানকে UI তে প্রদর্শন করতে ব্যবহৃত হয়। এই ক্ষেত্রে categories অ্যারে এবং seriesData অ্যারে লুপে ব্যবহার করা হয়েছে।
• ngIf: ngIf ডিরেকটিভটি শর্তাধীন উপাদান প্রদর্শন করার জন্য ব্যবহৃত হয়। এখানে, categories.length > 0 শর্তটি চেক করা হচ্ছে, যাতে নিশ্চিত হয় যে ডেটা লোড হয়েছে এবং সেই অনুযায়ী একটি মেসেজ দেখানো হচ্ছে।

স্টেপ 4: ডায়নামিকভাবে চার্টের ডেটা আপডেট করা

আপনি চাইলে ngFor এবং ngIf এর মাধ্যমে ডেটা পরিবর্তন করতে পারেন এবং সেই অনুযায়ী Highcharts চার্টকে রিফ্রেশ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি বাটন ক্লিক করলে ডেটা আপডেট করতে পারেন:

updateChart() {
  this.seriesData = [
    { name: 'Product A', data: [20, 30, 40, 50, 60] },
    { name: 'Product B', data: [25, 35, 45, 55, 65] },
    { name: 'Product C', data: [30, 40, 50, 60, 70] }
  ];

  this.chartOptions.series = this.seriesData;  // সিরিজ ডেটা আপডেট করা
}

এবং HTML তে:

<button (click)="updateChart()">চার্ট আপডেট করুন</button>

এটি ব্যবহারকারীর জন্য চার্টে ডেটা পরিবর্তন করার সুযোগ দিবে।

সারাংশ

Angular এর ngFor এবং ngIf ডিরেকটিভ ব্যবহার করে আপনি ডায়নামিকভাবে ডেটা লোড করতে পারেন এবং Highcharts চার্টে সেই ডেটা প্রদর্শন করতে পারেন। ngFor লুপের মাধ্যমে ডেটা অ্যারে বা লিস্টে যেকোনো উপাদানকে স্বয়ংক্রিয়ভাবে UI তে দেখানো যায় এবং ngIf এর মাধ্যমে শর্ত অনুযায়ী উপাদান প্রদর্শন বা গোপন করা যায়। এর মাধ্যমে আপনি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে সক্ষম হবেন।